<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
    <script src="static/js/vue.js"></script>
    <script src="static/js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="main">
    <button @click="add">增加</button>
    <table>
        <thead>
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>单价</td>
            <td>品牌</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in products">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.brand}}</td>
            <td>
                <button @click="modify(item.id)">修改</button>
                <button @click="del(item.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div>
        <div v-if="true">
            <button @click="showPageCur(-1)">&lt;</button>
            <button v-for="item in studensCount"
                    :class="{active:item==numpage}"
                    @click="showPage(item)">{{item}}
            </button>
            <button @click="showPageCur(1)">&gt;</button>
        </div>
        <div v-else>
            <button v-for="item in 6"
                    :class="{active:item==numpage}"
                    @click="showPage(item)">{{item}}
            </button>
            <button>...</button>
        </div>
    </div>
</div>
<script>
    let vue=new Vue({
        el:"#main",
        data:{
            products:[
                {
                    id:1,
                    name:"产品1",
                    price:1,
                    brand:"品牌1"
                },
            ]
        },
        method:{
            add() {//----------------新增跳转
                window.open('/productAdd', '_self');
            },
            modify(){//----------------修改跳转(通过id传参)
                window.open(`/productModify?id=${id}`, '_self');
            },
            del(id) {//删除操作

                $.ajax('/studentDel', {
                    method: 'post',
                    data: {
                        id
                    },
                    success: data => {
                        //以服务器优先
                        if (data.code == 200) {
                            let index = this.students.findIndex(item => {
                                return item.id == id;
                            });//查找id的索引
                            this.students.splice(index, 1);//删除对象
                        }
                    }
                })
            },
        }

    });
</script>
</body>
</html>